<template>
    <div class="my-bank-product-container">
        <div class="my-bank-product-text">我售出的产品:</div>
        <el-table
            :style="{'marginTop': '20px'}"
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
        >
            <el-table-column
                align="center"
                type="index"
                width="180"
                label="序号"
            >
            </el-table-column>
            <el-table-column align="center" label="产品名称">
                <template slot-scope="scope">
                    {{ scope.row.productName }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="产品信息">
                <template slot-scope="scope">
                    <el-button
                        type="info"
                        @click="handleCheckProductDetail(scope.$index, scope.row)">
                        点击查看
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column align="center" label="卖方信息">
                <template slot-scope="scope">
                    <el-button
                        type="info"
                        @click="handleCheckBuyerDetail(scope.$index, scope.row)">
                        点击查看
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column align="center" label="申请理由">
                <template slot-scope="scope">
                    <el-button
                        type="info"
                        @click="handleCheckReason(scope.$index, scope.row)">
                        点击查看
                    </el-button>
                </template>
            </el-table-column>

            <el-table-column align="center" label="订单状态">
                <template slot-scope="scope">
                    {{ scope.row.status == 0 ? '待接洽' : '已接洽' }}
                </template>
            </el-table-column>

            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button
                        type="success"
                        :disabled="scope.row.status==1"
                        @click="handleReceive(scope.$index, scope.row)">
                        确认接洽
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {getMyBankProduct} from "../../api/bank-product";
    import {ROLE_KEY} from "../../constants";
    import {
        getOrderFromBankFromMe,
        getOrderFromBankToMe,
        getOrderFromEnterpriseFromMe,
        getOrderFromEnterpriseToMe, receiveBankProductOrder, receiveEnterpriseProductOrder
    } from "../../api/order";

    export default {
        name: "my-bank-product",
        data() {
            return {
                role: '',
                listLoading: true,
                list: null
            }
        },
        methods: {
            handleReceive(index, row) {
                if(this.role == 'enterprise') {
                    receiveEnterpriseProductOrder({id: row.id}).then(res => {
                        window.location.reload()
                    })
                } else {
                    receiveBankProductOrder({id: row.id}).then(res => {
                        window.location.reload()
                    })
                }
            },
            handleCheckProductDetail(index, row){
                if(this.role == 'enterprise') {
                    this.$router.push({path: '/enterprise-product-detail', query: {id: row.pid}})
                } else {
                    this.$router.push({path: '/bank-product-detail', query: {id: row.pid}})
                }
            },
            handleCheckBuyerDetail(index, row) {
                if(this.role == 'enterprise') {
                    this.$router.push({path: '/bank-detail', query: {id: row.bid}})
                } else {
                    this.$router.push({path: '/enterprise-detail', query: {id: row.eid}})
                }
            },
            handleCheckReason(index, row) {
                this.$alert(row.detail, '申请理由', {
                    confirmButtonText: '确定',
                    // callback: action => {
                    //     this.$message({
                    //         type: 'info',
                    //         message: `action: ${ action }`
                    //     });
                    // }
                });
            },
            handleCheckDetail(index, row) {

            },
            handleDelete(index, row) {
                console.log(index)
                console.log(row)
            }
        },
        mounted() {
            this.role = localStorage.getItem(ROLE_KEY)
            if(this.role == 'enterprise') {
                getOrderFromBankToMe({status: -1}).then(res => {
                    this.list = res.data
                    this.listLoading = false
                })
            } else {
                getOrderFromEnterpriseToMe({status: -1}).then(res => {
                    this.list = res.data
                    this.listLoading = false
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .my-bank-product {
        &-container {
            margin: 30px;
        }

        &-text {
            font-size: 36px;
            line-height: 46px;
            font-weight: 600;
        }
    }
</style>
